<template>
	<view class="main">
		<view class="top">
			<image src="../../../static/images/nav-logo.png" class="logo"></image>
			<view class="title">掌上半岛·产业园地图</view>
			<image src="../../../static/images/menu.png" class="menu" @click="pop"></image>
		</view>
		<div v-if="showPop" class="other">
			<view class="row-between">
				<image src="../../../static/images/nav-account.png" class="account" @click="goLogin"></image>
				<image src="../../../static/images/nav-x.png" class="close" @click="showPop = false"></image>
			</view>
			<view style="height:36rpx"></view>
			<view class="item" v-for="(item,index) in navItems" :key="index" @click="changeItem(index)"> {{item.name}}</view>
		</div>
		
	</view>

</template>

<script>
	export default {
		data() {
			return {
				showPop:false,
				    navItems: [
				        { name: '首页', selected: false, width: '29px' }
				        , { name: '产业分布图', selected: false, width: '78px' }
				        , { name: '厂房租售', selected: false, width: '68px' }
				        , { name: '品质园区', selected: false, width: '68px' }
				        , { name: '专精特新企业', selected: false, width: '98px' }
				        , { name: '每日直播', selected: false, width: '68px' }
				        , { name: '联系我们', selected: false, width: '68px' }
				      ]
			}
		},
		onLoad() {
			console.log('onLoadonLoadonLoadonLoad11111')
		},
		mounted(){
			console.log('mountedmountedmountedmounted')
		},
		methods: {
			goLogin(){
				uni.navigateTo({
					url:'./login'
				})
			},
			changeItem(index){
				      this.$emit('changeItem', index)
					  this.showPop = false
			},
			pop(){
				this.showPop = !this.showPop
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: white;
		width: 100vw;
		display: flex;
		flex-direction: column;
		background-repeat: no-repeat;
	}
	.other{
		width: 100%;
		height: calc(100vh - 96rpx);
		display: flex;
		flex-direction: column;
	}
	.top{
		width: 100%;
		height: 96rpx;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 20rpx 0px rgba(12,12,12,0.1);
		display: flex;
		position: relative;
		align-items: center;
	}
	.logo{
		margin-left: 24rpx;
		width: 64rpx;
		height: 64rpx;
	}
	.title{
		margin-left: 24rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #004E96;
		line-height: 36rpx;
	}
	.menu{
		position: absolute;
		right: 24rpx;
		top: 24rpx;
		width: 48rpx;
		height: 48rpx;
	}
	.row-between{
		
		width: 100%;
		margin-top: 48rpx;
		display: flex;
		justify-content: space-between;
		height: 96rpx;
		align-items: center;
	}
	.account{
		margin-left: 48rpx;
		width: 96rpx;
		height: 96rpx;
	}
	.close{
		margin-right: 48rpx;
		width: 44rpx;
		height: 44rpx;
	}
	.item{
		width: 100%;
		margin-left: 48rpx;
		margin-top: 60rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 52rpx;
	}
</style>
